<template>
  <el-container >
    <el-header>
      <h1>用户请假申请</h1>
    </el-header>
    <el-main>
      <el-form :model="leaveRequest" ref="leaveForm" label-width="100px" @submit.prevent="submitLeaveRequest">
        <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
          <el-input v-model="leaveRequest.name" style="width: 200px;" disabled/>
        </el-form-item>

        <el-form-item label="员工id" prop="employeeid" :rules="[{ required: true, message: '您的员工id', trigger: 'blur' }]">
          <el-input  v-model="leaveRequest.employeeid" style="width: 200px;" disabled/>
        </el-form-item>
        
        <el-form-item label="部门id" prop="departmentid" :rules="[{ required: true, message: '您的部门id', trigger: 'blur' }]">
          <el-input  v-model="leaveRequest.departmentid" style="width: 200px;" disabled/>
        </el-form-item>
        
        <el-form-item label="请假原因" prop="reason" :rules="[{ required: true, message: '请输入请假原因', trigger: 'blur' }]">
          <el-input type="textarea" v-model="leaveRequest.reason" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="开始日期" prop="startdate" :rules="[{ required: true, message: '请选择开始日期', trigger: 'change' }]">
          <el-date-picker v-model="leaveRequest.startdate" type="datetime" placeholder="选择开始日期" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="结束日期" prop="enddate" :rules="[{ required: true, message: '请选择结束日期', trigger: 'change' }]">
          <el-date-picker v-model="leaveRequest.enddate" type="datetime" placeholder="选择结束日期" style="width: 200px;"/>
        </el-form-item>

        <el-form-item  label="请假类型" prop="leavetype" :rules="[{ required: true, message: '请选择请假类型', trigger: 'change' }]">
            
            <el-select v-model="leaveRequest.leavetype" placeholder="选择请假类型" style="width: 240px">
            <el-option 
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
             </el-select>    
    </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitLeaveRequest">提交请假申请</el-button>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref,toRaw  } from 'vue';
const value = ref('')
import { ElMessage ,ElMessageBox} from 'element-plus';







export default {
    setup() {
  
    const leaveRequest = ref({
      name: '',
      reason: '',
      startdate: '',
      enddate: '',
      employeeid: '',
      departmentid: '',
      leavetype:''
    });
   
    const options = [
  {
    value: '外出学习',
    label: '外出学习',
  },
  {
    value: '出差',
    label: '出差',
  },
  {
    value: '结婚',
    label: '结婚',
  },
  {
    value: '事假',
    label: '事假',
  },
  {
    value: '病假',
    label: '病假',
  },
]

    const user = JSON.parse(sessionStorage.getItem("user") || "{}");

    console.log('从sessionStorage获取的用户信息:', user);

    leaveRequest.value.name = user.name || '';
    leaveRequest.value.employeeid = user.userid || '';
    leaveRequest.value.departmentid = user.departmentid || '';
    console.log("leaveRequest.value.departmentid",leaveRequest.value.departmentid)
    const rawLeaveRequest = toRaw(leaveRequest.value); // 获取原始对象
    const submitLeaveRequest =async () => {
        try {
            const response = await fetch('http://localhost:8080/api/leaves/insert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body:JSON.stringify(rawLeaveRequest),
            });

            ElMessage({
            message: '成功',
            type: 'success'
          }); 

  
    
  } catch (error) {
    console.error('保存考勤记录失败：', error);
  }
      console.log('请假申请已提交:', leaveRequest.value);
   
    };




    return {
        options, // 确保返回 options
      leaveRequest,
      submitLeaveRequest,
      // 其他返回值
    };
  }
};


</script>

<style scoped>
/* 添加样式 */
</style>
